<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
    <script src="https://cdn.staticfile.org/vue/3.2.36/vue.global.min.js"></script>
    <style>
        .class1 {
            background: #444;
            color: #eee;
        }
    </style>
</head>

<body>
    <!-- 数据绑定最常见的形式就是使用 {{...}}（双大括号）的文本插值 -->
    <div id="hello-vue" class="demo">
        {{ message }}
        <br />
        <input v-model="message" type="text" />
        <br />
        <!-- 如果不想改变标签的内容，可以通过使用 v-once 指令执行一次性地插值，当数据改变时，插值处的内容不会更新。 -->
        <span v-once>这个将不会改变: {{ message }}</span>

        <hr>
        <!-- 使用 v-html 指令用于输出 html 代码： -->
        <p>使用双大括号的文本插值: {{ rawHtml }}</p>
        <p>使用 v-html 指令: <span v-html="rawHtml"></span></p>

        <hr>
        <!-- HTML 属性中的值应使用 v-bind 指令。 -->
        <!-- label标签种for属性作用关联input控件，点击label相当于点击input控件 -->
        <label for="r1">修改颜色</label><input type="checkbox" v-model="use" id="r1">
        <div v-bind:class="{'class1':use}">
            v-bind:class 指令
        </div>

        <hr>
        <!-- Vue.js 都提供了完全的 JavaScript 表达式支持。 -->
        <!-- 表达式会在当前活动实例的数据作用域下作为 JavaScript 被解析。
            有个限制就是，每个绑定都只能包含单个表达式，所以下面的例子都不会生效:
                这是语句，不是表达式:   {{ var a = 1 }}
                流控制也不会生效，请使用三元表达式: {{ if (ok) { return message } }}
        -->
        {{5+5}}<br>
        {{ ok ? 'YES' : 'NO' }}<br>
        {{ message.split('').reverse().join('') }}
        <div v-bind:id="'list-' + id">菜鸟教程</div>

        <hr>
        <!-- v-if 指令将根据表达式 seen 的值( true 或 false )来决定是否插入 p 元素。  -->
        <p v-if="see">现在看到我了</p>
        <p v-else>现在看不到我了</p>
        <input type="button" v-on:click="see = !see" value="点我">

        <hr>
        <!--  v-for 指令可以绑定数组的数据来渲染一个项目列表 -->
        <ol>
            <li v-for="site in sites">
                {{ site.text }}
            </li>
        </ol>

        <hr>
        <!-- 参数在指令后以冒号指明。例如， v-bind 指令被用来响应地更新 HTML 属性： 
        
        完整语法 :
            <a v-on:click="doSomething"> ... </a>

        缩写 :
            <a @click="doSomething"> ... </a>

        动态参数的缩写 (2.6.0+) :
            <a @[event]="doSomething"> ... </a>
        -->
        <p><a v-bind:href="url">菜鸟教程</a></p>

        <hr>
        <!-- 实例在用户点击按钮后对字符串进行反转操作 -->
        <p>{{ message}}</p>
        <button v-on:click="reverseMessage">反转字符串</button>

        <hr>
        <!-- v-bind 缩写:
                完整语法:<a v-bind:href="url"></a>
                缩写:    <a :href="url"></a>
            v-on 缩写:
                完整语法:<a v-on:click="doSomething"></a>
                缩写:   <a @click="doSomething"></a>
        -->
    </div>

    <script>
        const HelloVueApp = {
            data() {
                return {
                    message: 'Hello Vue!!',
                    rawHtml: '<span style="color: red">这里会显示红色！</span>',
                    use: false,
                    ok: true,
                    message: 'RUNOOB??',
                    id: 1,
                    see: true,
                    sites: [
                        { text: 'Google' },
                        { text: 'Runoob' },
                        { text: 'Taobao' }
                    ],
                    url: 'https://www.runoob.com'
                }
            },
            methods:{
                reverseMessage(){
                    this.message = this.message
                        .split("")
                        .reverse()
                        .join("");
                }
            }
        }

        Vue.createApp(HelloVueApp).mount('#hello-vue')
    </script>
</body>

</html>